<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="box">
			<view class="title-line"> {{detail.title}} </view>
			<block v-for="(item,index) in detail.chapter" :key="index" v-if="type == 1">
				<view class="list-item acea-row row-between-wrapper" @click="video(item)">
					<view class="">
						<view class="title"> {{item.chapter_name}} </view>
						<view class="acea-row row-middle">
							<text class="tag">视频</text>
							<text class="iconfont icon-yunhang"></text>
							<text class="duration">{{item.duration}}</text>
						</view>
					</view>
					<view class="lock acea-row row-center-wrapper">
						<!-- <text class="iconfont icon-suo"></text> -->
						<u-icon name="lock-fill" color="#AEAEB0" size="14" v-if="detail.is_lock == 1"></u-icon>
						<u-icon name="lock-opened-fill" color="#2979ff" size="14" v-else></u-icon>
					</view>
				</view>
			</block>
			<view class="content" v-else>
				<u-parse :content="detail.content"></u-parse>
			</view>
		</view>
		<view class="bottom-box ">
			<radio-group name="" class="radio-line acea-row row-middle">
				<label class=" acea-row row-middle" @click="radioCheck">
					<radio style="transform: scale(.8);" />我已阅读并同意
				</label>
				<navigator :url="'/pages/index/video_notice?type='+type">《购买须知》 </navigator>
			</radio-group>
			<view class="acea-row row-between-wrapper">
				<view class="total">
					费用:<text>￥{{detail.sale_price}}元</text>
				</view>
				<view @click="payment" class="order-btn">立即购买</view>
			</view>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
		<login :isAuto="false" ref="mySon" @phone_show="phone_show"></login>
		<phone :isShow="isShow2" @close="close2" @chamgs="chamgs2"></phone>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '线上培训',
					'color': true,
					'class': 'on'
				},
				detail: '',
				isShow2: false,
				type: '',
				id: '',
				isRead: false,
			};
		},
		onLoad(option) {
			this.list(option.id);
			this.id = option.id;
			console.log(option);
			this.type = option.type;
			if (this.type == 1) {
				this.parameter.title = '线上培训'
			} else {
				this.parameter.title = '线下培训'
			}

			console.log(option);
			let pages = getCurrentPages();
			if (pages[pages.length - 2]) {
				//如果有上一页，就返回上一页
				this.parameter.return = '1';
			} else {
				this.parameter.return = '2';
			}
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				path: '/pages/user/video/buy_list?id=' + this.id + '&type=' + this.type,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				path: '/pages/user/video/buy_list?id=' + this.id + '&type=' + this.type,
			}
		},
		methods: {
			async createOrder() {
				const res = await this.$myRequest({
					url: '/api/order/createOrder',
					data: {
						openid: uni.getStorageSync('openid'),
						type: 2,
						service_id: this.detail.id
					}
				})
				console.log("生成订单", res.data.data);
				var order_id = res.data.data.order_id;
				var service_name = res.data.data.service_name;
				if (res.data.status == 200) {
					uni.navigateTo({
						url: '/pages/user/payment?order_id=' + order_id + '&service_name=' + service_name +
							'&price=' + this.detail.sale_price
					})
				}

			},
			list(id) {
				var openid = uni.getStorageSync('openid');
				if (openid) {
					this.info(openid, id);
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: '您尚未登录，请先授权登录',
						complete() {
							uni.switchTab({
								url: "/pages/user/index"
							})
						}
					})
				}
			},
			async info(openid, id) {
				var that = this
				const res = await this.$myRequest({
					url: '/api/course/info',
					data: {
						openid: openid,
						id: id
					}
				})
				console.log(res.data.data.chapter)
				this.detail = res.data.data;
			},
			radioCheck() {
				this.isRead = true;
			},
			phone_show() {
				this.isShow2 = true;
			},
			close2() {
				this.isShow2 = false

			},
			video(item) {
				if (item.video_file) {
					console.log(2)
					uni.navigateTo({
						url: "/pages/user/video/detail?video_file=" + item.video_file
					})
				} else {
					this.$refs.uToast.show({
						message: '尚未解锁，请购买解锁后观看视频',

					})
				}
			},
			payment() {
				var openid = uni.getStorageSync('openid');
				if (openid) {
					if (!this.isRead) {
						this.$refs.uToast.show({
							type: 'error',
							message: '请阅读协议并同意'
						})
					} else {
						if (this.type == 1) {
							this.createOrder();
						} else {
							uni.navigateTo({
								url: "/pages/index/form/offline_form?service_id=" + this.detail.id + '&price=' +
									this
									.detail.sale_price
							})
						}
					}

				} else {
					this.$refs.mySon.login();

				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 30rpx;
		padding-bottom: 230rpx;
	}

	.box {
		background-color: #ffffff;
		border-radius: 18rpx;
		padding: 0 30rpx;
		padding-top: 30rpx;
		position: relative;
	}

	.title-line {
		color: #000000;
		font-weight: bold;
		font-size: 33rpx;
	}

	.list-item {
		padding: 30rpx 0;
		padding-left: 20rpx;
		border-bottom: 1px solid #F0F0F0;
	}

	.list-item .title {
		font-size: 28rpx;
		color: #000000;
		position: relative;
		margin-bottom: 16rpx;
	}

	.list-item .title::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		background: #A7A4B4;
		opacity: 0.45;
		border-radius: 50%;
		position: absolute;
		left: -20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.list-item .tag {
		width: 60rpx;
		height: 30rpx;
		border: 1px solid #E1E1E1;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		color: #E1E1E1;
		font-size: 21rpx;
	}

	.list-item .icon-yunhang {
		color: #CFCFCF;
		margin: 8rpx;
	}

	.list-item .duration {
		color: #CFCFCF;
		font-size: 24rpx;
	}

	.wap .content {
		border-top: 1px solid #F4F3F5;
		padding: 20rpx 0 40rpx 0;
		margin-top: 30rpx;
	}

	.list-item .lock {
		width: 38rpx;
		height: 38rpx;
		background: #EBEBED;
		border-radius: 50%;
		color: #AEAEB0;
		font-size: 22rpx;
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx;
		z-index: 10;
	}

	.bottom-box .total text {
		color: #FF4242;
	}

	.bottom-box .order-btn {
		width: 250rpx;
		height: 70rpx;
		background: #347DFE;
		border-radius: 10px;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
	}

	.radio-line {
		font-size: 28rpx;
		color: #B0B0B0;
		padding-bottom: 30rpx;
	}

	.radio-line navigator {
		color: #347DFE;
	}
</style>
